<template>
  <div class="top" style="overflow-y: hidden">
    <div class="buttonclienttext"><span>点击选择背景音乐</span></div>
    <el-scrollbar
      style="height: 100%; width: 100%"
      wrap-style="overflow-x:hidden;"
    >
      <div class="topbox">
        <div v-for="item in list" :key="item.id" class="toptopboxfor">
          <div class="topboxfor">
            <audio controls :src="url + item.path">
              <source />
            </audio>
          </div>
          <div class="divbuttondiv">
            <el-button
              class="buttondiv"
              type="danger"
              size="small"
              @click="imgdel(item.id)"
              >删除</el-button
            >
          </div>
        </div>
        <div>
          <el-upload
            :action="url + 'virtual/v1/userResources/upload'"
            accept=".ogg,.mp3,.wav"
            :on-success="success"
            :data="object"
            name="resources"
            :show-file-list="false"
          >
            <!-- :drag="true" -->
            <div class="boxup" v-if="!imageUrl">
              <span class="spanone">+</span>
              <span class="spantow">上传音频素材</span>
            </div>
            <div class="boxup" v-else>
              <img :src="imageUrl" />
            </div>
          </el-upload>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { list, dellist } from "@/api/virtualhuman";
export default {
  name: "bgMusic",
  data() {
    return {
      url: this.$store.getters["url/urls"],
      loading: false,
      list: [],
      imageUrl: "",
      object: {
        resourcesType: 3,
      },
    };
  },
  mounted() {
    this.imglist();
  },
  methods: {
    imgdel(id) {
      dellist({ resourcesId: id, source: 1 }).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: res.msg,
            type: "success",
          });
          this.imglist(); //再渲染一遍对应表格
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    imglist() {
      list({ pageIndex: 1, pageSize: 1000, type: 3 }).then((res) => {
        if (res.code === 200) {
          this.list = res.data.list;
        }
      });
    },
    success(res, file) {
      if (res.code === 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        // this.imageUrl = URL.createObjectURL(file.raw);
        this.imglist();
      } else {
        this.$message({
          message: res.msg,
          type: "error",
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  background-color: #222;
  width: 370px;
  margin: 0 auto;
  height: 800px;
  overflow: auto;
  .buttonclienttext {
    color: rgb(168, 168, 168);
    margin-top: 10px;
    font-size: 14px;
  }
  .topbox {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .toptopboxfor {
      margin-bottom: 10px;
      .divbuttondiv {
        height: 30px;
      }
      &:hover .buttondiv {
        display: inline-block;
      }
      .buttondiv {
        display: none;
        width: 100%;
        height: 100%;
      }
      .topboxfor {
        // border: 1px solid #757575;
        border-radius: 10px;
        // height: 130px;
        // width: 230px;
        // margin-bottom: 10px;
        // overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
    }
    .boxup {
      border: 2px dashed #66b1ff;
      height: 100px;
      width: 330px;
      border-radius: 10px;
      transition-duration: 0.5s;
      transition-property: all;
      position: relative;
      background-color: rgba(121, 180, 243, 0.1);
      &:hover {
        transform: scale(1.05);
      }
      .spanone {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -100%);
        border: 2px solid #66b1ff;
        border-radius: 20px;
        display: inline-block;
        width: 26px;
        font-size: 20px;
        font-weight: 900;
        color: #66b1ff;
      }
      .spantow {
        display: inline-block;
        margin-top: 55px;
        color: #66b1ff;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>